<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <!-- 引入vue的js文件，放在文件的头部 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>


    <div id="root">

        <!-- 设置是否显示，也可以用表达式返回的结果值 -->
        <h2 v-show="true">{{name}}好帅</h2>
        <!-- 也可以用属性值 -->
        <h2 v-show="isShow">{{name}}好帅</h2>
        <!-- template 标签不能使用v-show，可以使用v-if -->

        <!-- 也可以用 v-if 条件渲染  -->
        <h2 v-if="true">{{name}}好帅</h2>
        <!-- 因为是else-if，所以这个分支不会走 -->
        <h2 v-else-if="true">{{name}}好帅123</h2>
        <!-- 同理 -->
        <h2 v-else="true">{{name}}好帅123</h2>
        <!-- 如果有多个if-else的分支，代码中间不许打断，不然不生效 -->

        <!-- v-if 使用时候，不能确保百分百获取到标签，v-show一定是可以获取到的 -->
        <!-- 因为v-show只是隐藏标签 -->

    </div>


</body>
<script type="text/javascript">

    const vm = new Vue({
        el: "#root",
        data: {
            name: 'aBiu',
            isShow: true,
        },

    })
</script>

</html>